<template>
    <div class="mineCar_body">
        <div>/mineCar/mineCar</div>
    </div>
</template>

<script>

export default{
    name: "mineCar",
    data() {
      return {
      };
    },
    mounted() {
    },
    created(){
        this.fun();
    },
    methods: {
        fun(){
            console.log('123');
        },
    },
    beforeDestroy() {
    },
    components:{
    },
}
</script>

<style setup lang='scss'>
.mineCar_box{
  transform: rotateX(60deg) rotateY(-45deg);
  .mineCar_box_min{
    width: 50px;
    height: 50px;
    background: linear-gradient(0deg, rgba(64, 158, 255, 1), rgba(64, 158, 255, 0.2));
  }
  @keyframes mineCar_box_min_flash{
    0%   {transform: rotate(0deg);}
    50%  {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
  }
  /* transform: perspective(500px) rotate(45deg) rotateX(45deg); */
  .flash{
    animation-name:mineCar_box_min_flash;
    animation-duration:2s; /* 规定动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
    animation-delay:0s; /* 规定动画何时开始。默认是 0 */
    animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1  循环infinite*/
    animation-direction:normal; /* 规定动画是否在下一周期逆向地播放。默认是 "normal" * alternate/
    animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
    transform: rotate(0deg);
  }
}
/* 
perspective 属性
perspective 是 CSS 中用于创建 3D 效果的一个属性，它定义了观察者与 Z=0 平面的距离，使元素看起来有深度和透视效果。
perspective 属性可以应用于容器元素，它会影响所有该容器内的子元素的 3D 转换。
它的值是一个长度（比如 px 或 em），表示观察者到 3D 场景的距离。
距离越小，透视效果越明显；距离越大，透视效果越不明显。
 */
</style>
<style lang='scss'>
</style>